<template>
  <view>
    <view
      class="fixed l-0 b-0 flex tabbar"
      :style="{
        width: _width + 'px',
        height: _totalBarHeight + 'px',
        transform: `translateY(${props.bottom}rpx)`,
        zIndex: props.zIndex,
      }"
    >
      <!-- 			@click="emits('click', $event)"    -->
      <view class="relative" style="top: 15px">
        <tm-sheet
          :blur="_blur"
          :color="props.color"
          paren-class="relative"
          class="relative"
          :follow-theme="props.followTheme"
          :dark="props.dark"
          :round="props.round"
          :shadow="props.shadow"
          :outlined="props.outlined"
          :border="0"
          border-direction="top"
          :text="props.text"
          :transprent="false"
          :linear="props.linear"
          :linear-deep="props.linearDeep"
          :margin="[0, 0]"
          :padding="[0, 0]"
          :height="_BarHeight"
          :width="_width"
          unit="px"
        ></tm-sheet>
      </view>
      <view class="absolute flex flex-col l-0" :style="{ width: _width + 'px', height: _totalBarHeight + 'px' }">
        <view
          class="relative barcont flex flex-row flex-row-top-center flex-around flex-1"
          :style="{ width: _width + 'px' }"
          ><slot></slot
        ></view>
      </view>
    </view>
    <view
      v-if="_place"
      :style="{
        height: _totalBarHeight + 'px',
      }"
    ></view>
  </view>
</template>

<script lang="ts" setup>
/**
 * 底部导航栏
 * @description 内部只能放置,tm-tabbar-item
 */
import tmSheet from '../tm-sheet/tm-sheet.vue'
import tmText from '../tm-text/tm-text.vue'
import tmIcon from '../tm-icon/tm-icon.vue'
import { custom_props } from '../../tool/lib/minxs'
import {
  getCurrentInstance,
  computed,
  Ref,
  ref,
  provide,
  inject,
  onUpdated,
  onMounted,
  onUnmounted,
  nextTick,
  watch,
  PropType,
} from 'vue'
import { useTmpiniaStore } from '../../tool/lib/tmpinia'
const store = useTmpiniaStore()
const emits = defineEmits(['change', 'update:active'])
const props = defineProps({
  ...custom_props,
  transprent: {
    type: [Boolean],
    default: false,
  },
  color: {
    type: [String],
    default: 'white',
  },
  text: {
    type: [Boolean],
    default: false,
  },
  round: {
    type: [Number],
    default: 0,
  },
  shadow: {
    type: [Number],
    default: 0,
  },
  //如果为0取当前窗口宽度。
  width: {
    type: [Number],
    default: 0,
  },
  //底部偏移
  bottom: {
    type: [Number],
    default: 0,
  },
  //是否显示安全区域
  showSafe: {
    type: [Boolean],
    default: false,
  },
  //动态激活项的索引-1表示不激活任何项。
  active: {
    type: Number,
    default: -1,
  },
  //是否自动选中。如果禁用，则用户通过active来切换选中值，否则，点击项目时自动选中。
  autoSelect: {
    type: Boolean,
    default: true,
  },
  /** 在nvue上没有用处，请自行放到最尾部的地方。 */
  zIndex: {
    type: [Number],
    default: 200,
  },
  /**是否占位，底部填充空白view */
  place: {
    type: Boolean,
    default: false,
  },
})
let sys = uni.getSystemInfoSync()
const _width = computed(() => uni.upx2px(props.width) || sys?.windowWidth || 750)
const _blur = computed(() => props.blur)
const _place = computed(() => props.place)
const _activeUrl = ref('')
const _activeUid = ref('')
const tmTabbarId = 'tmTabbarId'
const _cachlist: Ref<Array<string | number>> = ref([])
const _showSafe = ref(props.showSafe)
const _activeIndex = ref(props.active)
const win_bottom = sys?.safeAreaInsets?.bottom ?? 0
if (win_bottom > 0) {
  _showSafe.value = true
}

const _totalBarHeight = computed(() => {
  if (_showSafe.value) return 90
  return 75
})
const _BarHeight = computed(() => {
  if (_showSafe.value) return 75
  return 60
})
function setNowurl(url: string, nowuid: number) {
  _activeUrl.value = url
  _activeUid.value = String(nowuid)
}
function pushKey(uid: number) {
  _cachlist.value = [...new Set([..._cachlist.value, uid])]
}
function delKey(uid: number) {
  _cachlist.value = _cachlist.value.filter((el) => el != uid)
}
defineExpose({ tmTabbarId, setNowurl, pushKey, delKey })
provide(
  'tmTabbarUrl',
  computed(() => _activeUrl.value)
)
provide(
  'tmTabbarUid',
  computed(() => _activeUid.value)
)
provide(
  'tmTabbarWidth',
  computed(() => Math.ceil(_width.value / _cachlist.value.length))
)
provide(
  'tmTabbarItemList',
  computed(() => _cachlist.value)
)
provide(
  'tmTabbarItemActive',
  computed(() => _activeIndex.value)
)
provide('tmTabbarItemSafe', _showSafe.value)
provide(
  'tmTabbarItemAutoSelect',
  computed(() => props.autoSelect)
)
watch(
  () => props.active,
  () => {
    if (props.active == _activeIndex.value) return
    _activeIndex.value = props.active
  }
)
watch(_activeIndex, () => {
  emits('change', _activeIndex.value)
  emits('update:active', _activeIndex.value)
})
</script>

<style>
/* #ifdef APP-NVUE */
.barcont {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.tabbar {
}
/* #endif */
/* #ifndef APP-NVUE */
.barcont {
  display: flex;
  flex-direction: row !important;
  justify-content: space-around !important;
  align-items: flex-start;
}
/* #endif */
</style>
